﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>首页 - 快递代拿系统</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../assets/css/express.css"/>
</head>
<body>

<div class="container">
    <!-- 导航栏 -->
    <nav class="navbar navbar-default">
        <div class="collapse navbar-collapse">
            <a class="navbar-brand">快递代拿信息填写</a>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/search">查询中心</a></li>
                <li><a href="/feedback">意见反馈</a></li>
                <li><a href="/login">登陆系统</a></li>
            </ul>
        </div>
    </nav>
    <!-- 主体 -->
    <form class="form-horizontal" id="expressForm">
        <div class="form-group">
            <label for="inputName" class="col-sm-1 control-label">取件姓名</label>
            <div class="col-sm-11">
                <input type="text" class="form-control" id="inputName" name="name" placeholder="请输入取件姓名">
            </div>
        </div>
        <div class="form-group">
            <label for="inputTel" class="col-sm-1 control-label">联系电话</label>
            <div class="col-sm-11">
                <input type="tel" class="form-control" id="inputTel" name="tel" placeholder="请输入联系电话">
            </div>
        </div>
        <div class="form-group">
            <label for="inputInfo" class="col-sm-1 control-label">取件短信</label>
            <div class="col-sm-11">
                <textarea class="form-control dis_change_textarea" id="inputInfo" name="message" rows="5"
                          placeholder="请直接复制取件短信（一个快递一个订单）"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputAddress" class="col-sm-1 control-label">配送地址</label>
            <div class="col-sm-11">
                <textarea class="form-control dis_change_textarea" id="inputAddress" name="address" rows="5"
                          placeholder="请输入配送地址"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputRemark" class="col-sm-1 control-label">备注（可选）</label>
            <div class="col-sm-11">
                <textarea class="form-control dis_change_textarea" id="inputRemark" name="remark" rows="5"
                          placeholder="如果有特殊要求，请备注于此"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputVerify" class="col-sm-1 control-label">验证码</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="inputVerify" name="verify" placeholder="请输入验证码">
            </div>
            <div class="col-sm-5" style="margin-top: 10px">
                <img id="verifyCode" src="getVerifyCode" title="看不清，请点我" onclick="refresh(this)"
                     onmouseover="mouseover(this)"/>
            </div>
        </div>
        <div class="form-group" style="text-align: center">
            <button class="btn btn-primary" type="submit">前往支付</button>
            <button class="btn btn-warning" type="reset">重新填写</button>
        </div>
    </form>
</div>
<script src="../../assets/js/jquery3.3.1.min.js"></script>
<script src="../../assets/js/jquery.validate.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/layer/layer.js"></script>
<script src="../../assets/js/http.js"></script>
<script type="text/javascript">
    function refresh(obj) {
        obj.src = "getVerifyCode?" + Math.random();
    }

    function mouseover(obj) {
        obj.style.cursor = "pointer";
    }

    $().ready(function() {
         $("#expressForm").validate({
            rules: {
                name: "required",
                tel: {
                    required: true,
                    minlength: 11
                },
                message: "required",
                address: "required",
                verify: "required"
            },
            messages: {
                name: "取件姓名不能为空",
                tel: {
                    required: "联系电话不能为空",
                    minlength: "手机号码不少于11位"
                },
                message: "取件短信不能为空",
                address: "配送地址不能为空",
                verify: "验证码不能为空"
            },
            submitHandler: function (form) {
                sendJson("post", "/checkVerifyCode", {"data": $("#inputVerify").val()}, false, function (res) {
                    if (!res.status) {
                        layer.msg(res.info,{icon:2});
                    } else {
                        sendJson("post", "/express", $("#expressForm").serialize(), false, function (res) {
                            if (!res.status) {
                                layer.msg(res.info,{icon:2});
                            } else {
                                window.location.href = res.data;
                            }
                        }, function () {
                            layer.msg("未知错误",{icon:2});
                        });
                    }
                }, function () {
                    layer.msg("未知错误",{icon:2});
                });
            }
        });
    });
</script>
</body>
</html>